<template>
  <view>
    <view class="u-page">
      <u-sticky>
        <view class="searchBar">
          <view class="select" @click="showUserTypeDropdown=true">
            <text class="name" v-if="selectedType">{{selectedType}}</text>
            <text class="name grey" v-else>人员选择</text>
            <u-icon name="arrow-down" color="#c1c1c1" size="18"></u-icon>
            <u-picker :show="showUserTypeDropdown" :columns="userTypeColumns"
              @close="showUserTypeDropdown=false"
              @cancel="showUserTypeDropdown=false"
              @confirm="userTypeChange"
            ></u-picker>
          </view>
          <u-search shape="square" v-model="keyword" inputAlign="center" :showAction="false" placeholder="请输入姓名" @search="onSearch"></u-search>
        </view>
      </u-sticky>  
      <view class="userList">
        <view class="item" v-for="(item, index) in userList" :key="index" v-show="item.show" @click.native="goPhoneCall(item.phone)">
          <view class="leftInfo">
            <view class="len1">
              <text class="name">{{item.name}}</text> 
              <view class="type" v-if="item.tagType" >
                <u-tag :text="item.userType" :type="item.tagType" shape="circle" size="mini" plain plainFill></u-tag>
              </view>
            </view>
            <view class="len2">{{item.phone | phoneFilter}}</view>
          </view>
          <image :src="getFmtImage('/mobile/teacher/wxImages/icon1.png')" mode=""></image>
        </view>
      </view>
      <view class="commongap _80"></view>
    </view>
    <mytabbar v-if="characterType"></mytabbar>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import sceneMixins from "@/utils/sceneMixins";
import mytabbar from "@/components/tabbar/index.vue";
import {uniqBy} from 'lodash';
export default {
  options: { styleIsolation: "shared" },
  components: { mytabbar: mytabbar },
  mixins: [sceneMixins],
  computed: {
    ...mapState(["userInfo", "openId", "characterType"]),
  },
  data() {
    return {
      selectedType: '',
      keyword: '',
      userList: [],
      showUserTypeDropdown: false,
      userTypeColumns: []
      
    };
  },
  filters: {
    phoneFilter: function (v) {
      if (v) {
        return v.slice(0, 3) + ' ' + v.slice(3, 7) + ' ' + v.slice(7, 11);
      } else {
        return '';
      }
    }
  },
  methods: {
    ...mapMutations(["changeTab"]),
    userTypeChange: function (v) {
      var value = v.value[0];
      this.selectedType = value == '全部' ? '' : value;
      this.showUserTypeDropdown = false;
      this.userList.forEach(n => {
        n.show = (!this.confirmKeyword || n.name.includes(this.confirmKeyword)) && (!this.selectedType || n.userType == this.selectedType)
      });
    },
    onSearch: function () {
      this.confirmKeyword = this.keyword;
      this.userList.forEach(n => {
        n.show = (!this.confirmKeyword || n.name.includes(this.confirmKeyword)) && (!this.selectedType || n.userType == this.selectedType)
      });
    },
    goPhoneCall: function (v) {
      uni.makePhoneCall({phoneNumber: v});
    }
  },
  onLoad(options) {
    var vm = this;
    vm.waitVariable("token").then(() => {
      // vm.getData('')
      vm.getAndLoad('通讯录', '/mobile/teacher/api/v1/user/mailList.jsp', function (res) {
        var userList = res.data;
        userList.forEach(n => n.show = true);
        vm.userTypeColumns = [[ '全部', ...uniqBy(userList, 'userType').map(n => n.userType)]];
        userList.forEach(user =>  {
          if (user.userType) {
            user.tagType = {
              '班主任': 'error',
              '带教导师': 'warning',
              '学员': 'primary',
            }[user.userType];
            if (!user.tagType) {
              user.tagType = 'success';
            }
          }
        });
        vm.userList = userList;
      });
    })
  },
};
</script>

<style lang="scss" scoped>
.u-page {
  height: 100vh;
  overflow-y: scroll;
}
.searchBar {
  display: flex;
  background: #fff;
  padding: 20rpx;
  .select {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-right: 20rpx;
    .name {
      color: #0089ff;
      margin-right: 8rpx;
      &.grey {
        color: #666666;
      }
    }
  }
}
.userList {
  .item {
    background: #fff;
    margin: 10rpx 0;
    padding: 20rpx 20rpx 5rpx;
    display: flex;
    .leftInfo {
      .len1 {
        display: flex;
       .name {
          font-size: 34rpx;
       }
       .type {
        margin-left: 20rpx;
        /deep/ {
          .u-tag--circle {
            border: none;
            padding: 0 20rpx;
            height: 40rpx;
            line-height: 40rpx;
            .u-tag__text {
             font-size: 11px;
            }
          }
        }
       } 
      }
      .len2 {
        margin-top: 14rpx;
        font-size: 26rpx;
        color: #9F9F9F;
      }
    }
    image {
      width: 64rpx;
      height: 64rpx;
      margin-left: auto;
      margin-right: 20rpx;
    }
  }
}
</style>
